<template>
  <div>
    <Header />
    <appSwiper :data="data" />
    <appAdv />
    <appList :categorylist="['裙子', '套装', '上衣']" bigImg="https://tc.phpx.cn/uploads/2023/06/05/GT2MHcwbYF.gif"
      :list="menswearList" info="高端潮牌平替产品，多种款式，每日更新">
      <div class="title">
        <p></p>
        <span>女装girl</span>
      </div>
    </appList>
    <appList :categorylist="['上衣', '裤子']" bigImg="https://tc.phpx.cn/uploads/2023/06/05/synQGy1ezT.gif"
      :list="wmenswearList" info="追求美、你值得拥有" />
    <appList :categorylist="['童装', '童鞋']" bigImg="https://tc.phpx.cn/uploads/2023/06/05/HtPpxAL4rB.gif" :list="sonList"
      info="" />
      <Footer />
  </div>
</template>

<script>
import Header from '../../components/head/head.vue'
import appSwiper from '../../components/swiper/swiper.vue'
import appAdv from './children/advertisement.vue'
import appList from './children/list.vue'
import Footer from '../../components/footer/footer.vue'
import { bannerRequest, wmanRequest, manRequest, sonRequest } from '../../api/home';

export default {
  data() {
    return {
      data: [],
      menswearList: [],
      wmenswearList: [],
      sonList: []
    }
  },
  mounted() {
    this.getBanner()
    this.getWmanList()
    this.getManList()
    this.getSonList()
  },
  methods: {
    async getBanner() {
      let res = await bannerRequest('/pro/list', {
        count: 1,
        limitNum: 4
      })
      this.data = res.data
    },
    async getWmanList() {
      let res = await bannerRequest('/pro/list', {
        count: 2,
        limitNum: 10
      })
      this.wmenswearList = res.data
    },
    async getManList() {
      let res = await bannerRequest('/pro/list', {
        count: 3,
        limitNum: 10
      })
      this.menswearList = res.data
    },
    async getSonList() {
      let res = await bannerRequest('/pro/list', {
        count: 4,
        limitNum: 10
      })
      this.sonList = res.data
    },
  },
  components: {
    Header,
    appSwiper,
    appAdv,
    appList,
    Footer
  }
}
</script>

<style scoped>
.title {
  background: #eee;
  padding: 20px 40px;
}

.title p {
  height: 1px;
  background: #f00;
}

.title span {
  display: block;
  width: 180px;
  margin: -12px auto 0;
  text-align: center;
  background: #eee;
}
</style>